import { createApp } from 'vue';
import App from './App.vue';
import router from './route';
import './assets/index.css';
import Syntax02Component from './components/demo01-syntax/Syntax02-component.vue';

const app = createApp(App);
app.use(router);
// 自定义组件
app.component('syntax02-component',Syntax02Component);
// 自定义组件2
app.component('my-component', {
    template: `<p class="active">我是自定义组件，是在main.js全局注册的!</p>`
});
// 自定义组件3
app.component('my-component2', {
    props: ['title'],
    template: `<h4>{{ title }}</h4>`
});
// 自定义组件3
app.component('my-component3', {
    props: ['title'],
    template: `
      <button class="zhtt-btn" @click="$emit('enlargeText')">Enlarge text</button>
      <h4>{{ title }}</h4>`,
    emits: ['enlargeText']
});
// 自定义组件4
app.component('zhtt-card', {
    props: ['title','footer'],
    template: `
      <div class="zhtt-demo-card">
      <div class="zhtt-demo-card-header">{{title}}</div>
      <div  class="zhtt-demo-card-body">
        <slot></slot>
      </div>
      <div class="zhtt-demo-card-footer">
        {{footer}}
      </div>
      </div>`,
    emits: ['enlargeText']
});
app.mount('#app');